<template>
	<div class="demo">
		<button
			v-for="tab in tabs"
			v-bind:key="tab"
			v-bind:class="['tab-button', { active: currentTab === tab }]"
			v-on:click="currentTab = tab"
		>{{ tab }}</button>
		<!-- 动态组件 component ,keep-alive 组件将会被缓存-->
		<keep-alive>
			<component :is="currentTabComponent"></component>
		</keep-alive>
	</div>
</template>
<script>
import index from "./index";
import about from "./about";
import list from "./list";
export default {
	beforeCreate() {},
	data() {
		return {
			currentTab: "index",
			tabs: ["index", "about", "list"]
		};
	},
	computed: {
		currentTabComponent: function() {
			return this.currentTab.toLowerCase();
		}
	},
	components: {
		index,
		about,
		list
	},
	methods: {}
};
</script>

<style scoped>
.tab-button {
	padding: 6px 10px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border: 1px solid #ccc;
	cursor: pointer;
	background: #f0f0f0;
	margin-bottom: -1px;
	margin-right: -1px;
}
.tab-button:hover,
.tab-button.active {
	background: #f00;
	color: #fff;
}
.dome-cnt {
	border: 1px solid #ccc;
	padding: 10px;
}
</style>
<!--
component is 内置组件切换方法一：

    component组件（单独拿出一个组件来专门进行切换使用）

    使用is来绑定你的组件：如下面的about,list等引入的组件名

    changeViewFun 是用来切换组件的方法 通过给is绑定的currentView来实现切换组件

    pathUrl就是当前的路由
-->